<template>
    <div class="loginBox" >
        <div class="loginBoxLeft">
            <div class="kk" >
                <div class="userInfo">
                    <div class="imgBox">
                        <div class="img">
                            <img src="" alt="">
                        </div>
                    </div>
                   
                    <div class="user">
                        <p class="userName">懒人的懒样</p>
                        <div class="lvel"><span>Lv.1</span></div>
                        <p class="focus"><span>关注 2</span> | <span>粉丝 0</span></p>
                    </div>
                    <div class="qiandao"><p>签到</p></div>
                </div>
                <ul class="lis">
                    <li>
                        <p>成为白金VIP</p>
                    </li>
                    <li>
                        <p><span>我的消息</span><span class="spanR">23</span></p>
                    </li>
                    <li>
                        <p>动态</p>
                    </li>
                    <li>
                        <p>个性化</p>
                    </li>
                    <li>
                        <p><span>我的积分</span><span class="spanR">0积分</span></p>
                    </li>
                    <li>
                        <p>邀请有奖</p>
                    </li>
                    <li>
                        <p>免流量</p>
                    </li>
                    <li>
                        <p>定时关闭</p>
                    </li>
                    <li>
                        <p>音悦商城</p>
                    </li>
                    <li>
                        <p><span>更多</span><span class="spanR">口味选择、K歌等</span></p>
                    </li>
                </ul>
                <div class="SetBox">
                    <div class="set">
                        <p><i class="iconfont icon-shezhi"></i><span>设置</span></p>
                    </div>
                    <div class="help">
                        <p><i class="iconfont icon-shiyongbangzhu1"></i><span>帮助&反馈</span></p>
                    </div>
                </div>
            </div>
            
        </div>
        <div class=" kong" @click="down"></div>
    </div>
</template>
<script>
export default {
  name: "",
  methods: {
    down() {
      document.querySelector(".loginBox").style.transform = "translateX(-100%)";
      document.querySelector(".loginBox").style.opacity="0";
    }
  }
};
</script>
<style lang="scss" scoped>
html,
body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  font-size: 0;
}
.loginBox {
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  font-size: 0.25rem;
  transition: 0.2s;
  z-index: 100;
  .loginBoxLeft {
    float: left;
    width: 75%;
    height: 100%;
    background: #fff;
    padding: 0.4rem;
    box-sizing: border-box;
    .kk {
      width: 100%;
      height: 100%;
      position: relative;
      padding-top: 0.3rem;
      padding-top: 10%;
      box-sizing: border-box;
      .userInfo {
        width: 100%;
        height: 10%;
        overflow: hidden;
        .imgBox {
          float: left;
          padding-right: 0.2rem;
          .img {
            width: 1.5rem;
            height: 1.5rem;
            border-radius: 0.5rem;
            overflow: hidden;
            img {
              width: 100%;
            }
          }
        }
        .user {
          float: left;
          .userName {
            font-size: 0.25rem;
          }
          .lvel {
            display: inline-block;
            padding: 0rem 0.15rem;
            background: #22c5bd;
            border-radius: 0.1rem;
            margin: 0.1rem 0;
            > span {
              font-size: 0.1rem;
              color: #fff;
              line-height: 0.05rem;
            }
          }
          .focus {
            font-size: 0.15rem;
            color: #666;
          }
        }

        .qiandao {
          float: right;
          border: 1px solid #000;
          padding: 0.02rem 0.2rem;
          border-radius: 0.5rem;
          margin-top: 0.1rem;
          p {
            font-size: 0.25rem;
          }
        }
      }
      .lis {
        width: 100%;
        height: 80%;
        padding: 0.3rem 0.1rem 0;
        box-sizing: border-box;
        overflow: auto;
        li {
          width: 100%;
          height: 10%;
          padding: 0.4rem 0;
          box-sizing: border-box;
          p {
            font-size: 12px;
            overflow: hidden;
            .spanR {
              float: right;
              font-size: 0.15rem;
              color: #999;
            }
          }
        }
      }
      .SetBox {
        width: 100%;
        position: absolute;
        bottom: 0;
        left: 0;
        overflow: hidden;
        .set {
          float: left;
          p {

            > span {
              margin-left: 0.2rem;
              font-size: 12px;
            }
          }
        }
        .help {
          float: right;
          .icon-shiyongbangzhu1 {
            margin-right: 0.2rem;
          }
          font-size: 12px;
        }
      }
    }
  }
  .kong {
    width: 25%;
    height: 100%;
      float: right;
  }
}
</style>
